import React, { useState } from 'react';
import { Drawer, Button, Form, Input, Tree } from 'antd';

export default function TreeDrawer(props) {
  console.log('TreeDrawer');
  const { setTheRole, theRole, addRole } = props;
  console.log(theRole);
  const [treeForm] = Form.useForm();
  const formAndSend = async () => {
    const formData = treeForm.getFieldsValue();
    await addRole({ ...formData, menuId: cKeys.join(',') });
    setCKeys([]);
  };

  const drawerFooter = (
    <Button onClick={formAndSend} type="primary">
      新增
    </Button>
  );
  const treeCheck = (checkedKeys) => {
    setCKeys(checkedKeys);
  };
  let [cKeys, setCKeys] = useState([]);
  return (
    <>
      <Drawer
        destroyOnClose
        footer={drawerFooter}
        width={650}
        title={'角色'}
        placement="right"
        onClose={() => {
          props.setShowDrawer(false);
          treeForm.setFieldsValue({});
        }}
        visible={props.showDrawer}
      >
        <Form form={treeForm}>
          <Form.Item label="角色名称" name="roleName">
            <Input></Input>
          </Form.Item>
          <Form.Item label="角色描述" name="remark">
            <Input.TextArea></Input.TextArea>
          </Form.Item>
        </Form>
        <Tree
          onCheck={treeCheck}
          treeData={props.allMenus}
          multiple
          checkable
        ></Tree>
      </Drawer>
    </>
  );
}
